import React, { useRef, useEffect } from 'react'


import "./index.scss"
import { Row, Col, Typography, Tabs, Form, Input, Button, message } from "antd"
import { UserOutlined, LockOutlined, PhoneOutlined, ShakeOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import { reg } from '../../utils/validate';
import { ajax } from '../../api';


const { Title } = Typography
export default function Register(props: any) {

    const rForm: any = useRef()
    const [form] = Form.useForm()
    const { history } = props

    const onFinish = async (value: any) => {

        console.log(value);
        console.log(rForm);
        console.log(rForm.current.getFieldsValue());

        console.log(form)
        console.log(form.getFieldsValue())


        if (value.password != value.dbpassword) {
            message.destroy()
            message.error("两次密码不之一")
        } else {
            // ajax 
            value.role = 1
            let { code, result }: any = await ajax.register(value)
            if (code == 200) {
                history.push(`/login?phone=${value.phone}&username=${value.username}`)
            }


        }

    }
    const onFinishFailed = () => {
        console.log("onFinishFailed");
        message.destroy()
        message.error("请输入正确的注册信息")
    }
    const testFn = async () => {
        let res = await ajax.test()

    }

    const resetDate = () => {
        form.resetFields()

    }
    useEffect(() => {
        testFn()
    }, [])
    return (
        <div className='login'>
            <img className="myvideo" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F03895a2576cbf480000012e7ecad562.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641648538&t=76bf6f78e3b16bc79b59fcb7da59f6e6" alt="" />
            <Row style={{ height: "100 %" }}>
                <Col span={24}>
                    <div className='login-box'>
                        <Title className='title'>欢迎注册学员用户</Title>
                        <div className='box'>
                            <Form
                                name="basic"
                                labelCol={{ span: 6 }}
                                wrapperCol={{ span: 18 }}
                                initialValues={{
                                }}
                                onFinish={onFinish}
                                onFinishFailed={onFinishFailed}
                                autoComplete="off"
                                ref={rForm}
                                form={form}
                            >
                                <Form.Item
                                    label="用户名:"
                                    name="username"
                                    rules={[{ required: true, message: '请输入用户名!' },

                                    ]}

                                >
                                    <Input prefix={<UserOutlined className="site-from-item-icon" />} placeholder='请输入用户名' />
                                </Form.Item>
                                <Form.Item
                                    label="手机号:"
                                    name="phone"
                                    rules={[{ required: true, message: '请输入手机号!' }, { pattern: reg.phone, message: "请输入正确的手机号" }]}

                                >
                                    <Input prefix={<ShakeOutlined className="site-form-item-icon" />} placeholder="请输入手机号" />
                                </Form.Item>

                                <Form.Item
                                    label="密&emsp;码:"
                                    name="password"
                                    rules={[{ required: true, message: '请输入密码!' }, { pattern: reg.pwd, message: "请输入6-16位数字加字母的密码" }]}

                                >
                                    <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} placeholder="请输入密码" />
                                </Form.Item>
                                <Form.Item
                                    label="确认密码:"
                                    name="dbpassword"
                                    rules={[{ required: true, message: '请输入确认密码!' }, { pattern: reg.pwd, message: "请输入6-16位数字加字母的密码" }]}

                                >
                                    <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} placeholder="请输入确认密码" />
                                </Form.Item>

                                <Form.Item wrapperCol={{ offset: 6, span: 18 }} style={{ marginBottom: "0" }}>
                                    <Row>
                                        <Col span={11}>
                                            <Button type="primary" htmlType="submit" block>
                                                注册
                                            </Button>
                                        </Col>
                                        <Col span={11} offset={2}>
                                            <Button type="default" block onClick={resetDate}>
                                                重置
                                            </Button>
                                        </Col>
                                    </Row>
                                </Form.Item>
                                <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
                                    <div className='links' style={{ width: "100%", display: "flex", justifyContent: "space-between" }}>
                                        <Link style={{ color: "#f50" }} to="/login">已有帐号 前往登录</Link>
                                        <Link to="/forgetpass">忘记密码？</Link>
                                    </div>
                                </Form.Item>
                            </Form>
                        </div>
                    </div>
                </Col>
            </Row>

        </div >
    )
}
